<!--订单首页-->
<style scoped lang="less">
.gridbg {
  background-color: #fefefe;
}
.order-list {
  .todo {
    height:0.86rem; 
    line-height:0.86rem; 
    padding:0 0.2rem;
    .tag {
      height:0.56rem;
      line-height: 0.56rem;
      padding:0 0.2rem;
      margin-left: 0.1rem;
      background:#ff7202;
      color:#fff;
      border-radius: 0.28rem;
    }
  }
  .list-order-warp{
    background: #fff;
    .title {
      padding:10px;
      color:#888;
      font-size:14px; 
      border-bottom:1px solid #ebebeb;
    }
    .con {
      padding: 0.1rem 0.2rem;
      border-bottom: 1px solid #ebebeb;
      .cargo {
        margin: 0.1rem;
        height: 1.3rem;
        width:1.3rem;
        text-align: center;
        border-radius: .08rem;
        background: #edf8f8;
        overflow: hidden;
        i {
          display: block;
          height: 1rem;
          line-height: 1rem;
          font-size: .6rem;
          color: #77babd;
        }
        p {
          height: .3rem;
          line-height: .3rem;
          font-size: .2rem;
          color: #fff;
          background: #77babd;
        }
      }
      .msg {
        margin-left:0.2rem;
        font-size:13px;
        line-height: 0.5rem;
      }
    }
    .btn-grp {
      padding:0.1rem 0.2rem 0.1rem 0;
      text-align: right;
      .btn{
        margin-left: 0.1rem;
      }
    }
  }
}
</style>

<template>
  <div class="contain order-list">
    <div class="listhead-fix">
      <div class="m-sech-wrap mr20">
        <router-link :to="{path:'/search',query: { type: 'customDelivery'}}" class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt || '输入订单编号'}}</div>
          </div>
        </router-link>
      </div>
    </div>

    <scroller lock-x scrollbar-y use-pullup height="-116" style="margin-top:68px;" ref="Scroller" :pullup-config="ScrollerConfig" @on-pullup-loading="getdata()" v-if="todolist.length>0">
      <div>
        <div class="list-order-warp mb30" v-for="item in todolist" @click="goToSign(item.billno)">
          <div class="title">
            计划单号：{{item.billno}}
          </div>
          <div class="displayflex con">
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <p>{{item.detailgoodssum}}个</p>
            </span>
            <div class="msg">
              <p>制单时间：{{item.inputdate}}</p>
              <p>医院：{{item.medname}}</p>
              <p>业务员：{{item.operatername}}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>

    <div class="noDate_page" v-if="todolist.length <= 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>

    <manage-footer :status="2"></manage-footer>
  </div>
</template>

<script>
import manageFooter from "@/components/core/footer/manage.footer.vue";
import manageHeader from "@/components/core/header/manage.header.vue";
export default {
  name: "orderIndex",
  components: {
    manageFooter,
    manageHeader
  },
  data() {
    return {
      ScrollerConfig:{
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
      sechTxt:'',
      todolist: [],
      totalRecords:0,
      noMore: false,

      request: {
					billtype: '', //'01'代表普通耗材,只有初始传01才不会出错
					searchvalue: '',
					pageNo: 1,
					pageSize: 10
        },
      statesValue:'01',
    };
  },
  created() {
    this.sechTxt = sessionStorage.sechtxt;
    this.getdata();
  },
  mounted() {
    this.$nextTick(function() {
      
    });
  },
  methods: {
    goToSign(guid){
      this.$router.push({ 
        path: '/Order/HisOrderDetail', 
        query: { 
          Guid: guid,
          type:'1'
        } 
      })
    },
    getdata() {
      this.request.searchvalue = this.sechTxt;
      sessionStorage.removeItem('sechtxt');

      this.Ajax.post('wxh/order/getHisOrder', this.request).then((resp) => {
        if (resp.errorCode == 0) {
          this.totalRecords = resp.data.total;
          if(resp.data.list && resp.data.list.length > 0){
            this.request.pageNo++;
            this.todolist = this.todolist.concat(resp.data.list);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: resp.message || '操作异常，请稍后重试',
          });
        };
      });
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
};
</script>
